<template>
  <div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">Pricing Layout</h2>
  </div>
  <!-- BEGIN: Pricing Layout -->
  <div class="intro-y box flex flex-col lg:flex-row mt-5">
    <div class="intro-y flex-1 px-5 py-16">
      <CreditCardIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 35
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
    <div
      class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 p-5 lg:border-l lg:border-r border-slate-200/60 dark:border-darkmode-400 py-16"
    >
      <BriefcaseIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Business</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 60
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
    <div class="intro-y flex-1 px-5 py-16">
      <ShoppingBagIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Enterprise</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 120
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
  </div>
  <!-- END: Pricing Layout -->
  <!-- BEGIN: Pricing Layout -->
  <div class="intro-y box flex flex-col lg:flex-row mt-5">
    <div class="intro-y flex-1 px-5 py-16">
      <ActivityIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 35
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
    <div
      class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 px-5 lg:border-l lg:border-r border-slate-200/60 dark:border-darkmode-400 py-16"
    >
      <BoxIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Business</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 60
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
    <div class="intro-y flex-1 px-5 py-16">
      <SendIcon class="block w-12 h-12 text-primary mx-auto" />
      <div class="text-xl font-medium text-center mt-10">Enterprise</div>
      <div class="text-slate-600 dark:text-slate-500 text-center mt-5">
        1 Domain <span class="mx-1">•</span> 10 Users
        <span class="mx-1">•</span> 20 Copies
      </div>
      <div class="text-slate-500 px-10 text-center mx-auto mt-2">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </div>
      <div class="flex justify-center">
        <div class="relative text-5xl font-semibold mt-8 mx-auto">
          <span class="absolute text-2xl top-0 left-0 -ml-4">$</span> 120
        </div>
      </div>
      <button
        type="button"
        class="btn btn-rounded-primary py-3 px-4 block mx-auto mt-8"
      >
        PURCHASE NOW
      </button>
    </div>
  </div>
  <!-- END: Pricing Layout -->
</template>
